<template>
  <div>
    <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <div>
      <el-button size="small" type="primary" v-if="$checkAccess('MENU_REIMBURSEMENT_ENTRY_DOWNLOAD')">
        <a
          class="download"
          download
          href="https://clt-scf-file.oss-cn-hangzhou.aliyuncs.com/%E8%BF%98%E6%AC%BE%E5%BD%95%E5%85%A5%E6%A8%A1%E7%89%88%20.xls?OSSAccessKeyId=LTAI5tF3De9arA9E9Ngynh1k&Expires=1960340804&Signature=Vl39p9Zjfms%2BnvkWzOK%2Byb7l%2FLY%3D"
          >下载模版</a
        >
      </el-button>
      <el-button
        size="small"
        type="primary"
        @click="openImportPop()"
        v-if="$checkAccess('MENU_REIMBURSEMENT_ENTRY_EXPORT')"
      >
        一键导入
      </el-button>
    </div>
    <BaseTable class="mt20" :columns="columns" v-bind="table">
      <template slot-scope="scope" slot="drawdownAmount">
        <span>{{ scope.row.drawdownAmount | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="repayAmount">
        <span>{{ scope.row.repayAmount | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="notRepayAmount">
        <span>{{ scope.row.notRepayAmount | separatorMoney }}</span>
      </template>
    </BaseTable>
    <ImportPop ref="importPop" v-if="isShowImportPop" :show.sync="isShowImportPop"></ImportPop>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import ImportPop from '@/components/ImportPop/index.vue'
import { PAYMENT_ENTRY_STATUS } from '@/constants/enterpriseModel.js'

const service = async params => {
  const { records, total } = await http.get('/repayment/records', {
    params: params,
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'repaymentEntryList',
  components: {
    BaseSearch,
    BaseTable,
    ImportPop,
  },
  mixins: [FormTableMixin(service)],
  data() {
    const isCanDetail = this.$checkAccess('MENU_REIMBURSEMENT_ENTRY_DETAIL')

    return {
      searchConfig: [
        { component: 'input', prop: 'searchStr', label: '搜索', placeholder: '企业名称' },
        {
          component: 'select',
          prop: 'fundCode',
          label: '所属资方',
          options: [],
        },
        {
          component: 'select',
          prop: 'appCode',
          label: '所属项目',
          options: [],
        },
        {
          component: 'select',
          prop: 'status',
          label: '状态',
          options: [
            { label: '成功', value: '1' },
            { label: '失败', value: '0' },
          ],
        },
      ],
      columns: [
        { label: '对账时间', prop: 'createDate' },
        {
          label: '项目名称',
          prop: 'appName',
        },
        {
          label: '企业名称',
          prop: 'tenantName',
        },
        {
          label: '支用笔数',
          prop: 'drawdownNum',
        },
        {
          label: '支用金额(元)',
          prop: 'drawdownAmount',
        },
        { label: '还款笔数', prop: 'repayNum' },
        {
          label: '还款金额(元)',
          prop: 'repayAmount',
        },
        {
          label: '当日在贷余额(元)',
          prop: 'notRepayAmount',
        },
        {
          label: '对账结果',
          prop: 'status',
          render: (val, row) => {
            return <span>{PAYMENT_ENTRY_STATUS[row.status]}</span>
          },
        },
        {
          label: '操作',
          render: (val, row) => {
            return (
              <div>
                {isCanDetail && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.goDetail(row)
                    }}>
                    详情
                  </el-button>
                )}
              </div>
            )
          },
        },
      ],
      isShowImportPop: false,
    }
  },
  watch: {
    isShowImportPop(newVal, oldVal) {
      if (!newVal) {
        this.$refs.search.$refs.searchForm.resetFields()
        this.form.onSubmit()
      }
    },
  },
  methods: {
    openImportPop() {
      this.isShowImportPop = true
    },
    goDetail(item) {
      this.$router.push({
        name: 'repaymentEntryDetail',
        query: {
          recordId: item.id,
        },
      })
    },
    // 获取来源
    async getSourceListRequest() {
      const sourceList = await this.$http.get(`/app/list`, { isLoading: false })
      if (sourceList && sourceList.length) {
        const list = sourceList.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
        this.searchConfig[2].options = [...list]
      }
    },
    // 资方列表
    async getfundsListRequest() {
      const res = await this.$http.get('/funds/list', { isLoading: false })
      if (res && res.length) {
        this.searchConfig[1].options = res.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
      }
    },
  },
  mounted() {
    this.getfundsListRequest()
    this.getSourceListRequest()
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
